<template>
	<div class="check-content">
		<div class="check-title">
			<router-link to="/" class="title-left">
				<span id="title-font" class="iconfont icon-arrow_left"></span>
			</router-link>
			<span>
				查看假条
			</span>
		</div>
		<div class="check-list" v-for="(data, num) in getObj" :key="data.Count">
			<ul class="check-ul">
				<li>创建假条日期：{{data.NoteTime}}</li>
				<li>申请人：{{data.My}}</li>
				<li>审核人：{{data.Teacher}}</li>
				<li>所属学院：{{data.College}}</li>
				<li>班级：{{data.Class}}</li>
				<li>假条开始日期：{{data.StartTime}}</li>
				<li>假条结束日期：{{data.EndTime}}</li>
				<div class="check-btn" :id="num">
					<button v-show="getState.isBtnBack[num]">撤回假条</button>
					<button @click="onOutSchool($event)" :style="getState.isSetColor[num]" v-show="getState.isBtnChange[num]">{{getState.isBtnTxt[num]}}</button>
				</div>
			</ul>
			<img :src="getState.isChangeImg[num]">
		</div>
	</div>
</template>

<script>
export default{
	data() {
		return{
			// 一个存储button状态的数组
			isButtonState:{
				isBtnBack: {},
				isBtnChange: {},
				isBtnTxt: {},
				isChangeImg: {},
				isSetColor: {}
			},
			getObj: JSON.parse(localStorage.getItem("Leave")),
			getState: JSON.parse(localStorage.getItem("State")),
		}
	},
	methods:{
		onOutSchool(e){
			if(e.currentTarget.textContent == '确认离校'){
				this.getState.isChangeImg[e.currentTarget.parentElement.id] = require("@/assets/img/fanxiao.png")
				this.getState.isBtnBack[e.currentTarget.parentElement.id] = false
				this.getState.isBtnTxt[e.currentTarget.parentElement.id] = '确认返校'
				this.getState.isSetColor[e.currentTarget.parentElement.id] = 'background: #e6a23d'
				localStorage.setItem("State",JSON.stringify(this.getState))
			}else{
				this.getState.isChangeImg[e.currentTarget.parentElement.id] = require("@/assets/img/wancheng.png")
				this.getState.isBtnChange[e.currentTarget.parentElement.id] = false
				localStorage.setItem("State",JSON.stringify(this.getState))
			}
			/*
				待解决问题：
				（1）新添加的假条不能实时获取，并且视图更新
				（2）新的假条出现在列表下面，而不是列表顶部
				（3）不允许输入假条的时候输入空值
			*/
			
		}
	},
	mounted() {
		console.log(this.getObj)
		// 如果第一次进入组件
		if(this.getState == null){
			for(var i = 0; i < this.getObj.length; i++){
				this.isButtonState.isBtnBack[i] = true;
				this.isButtonState.isBtnChange[i] = true;
				this.isButtonState.isBtnTxt[i] = '确认离校';
				this.isButtonState.isChangeImg[i] = require("@/assets/img/pizhun.png");
				this.isButtonState.isSetColor[i] = '';
			}
			// 将初始化状态赋值给localstorage持久化保存
			localStorage.setItem("State",JSON.stringify(this.isButtonState));
		}else{
			
		}
	 }
}
</script>

<style scoped="scoped">
.check-title{
	font-size: .5rem;
	text-align: center;
	line-height: 1rem;
	border-bottom: 1px solid black;
}
#title-font{
	line-height: 1rem;
	position: absolute;
	left: 0;
	font-weight: 500;
}
#title-font:visited{
	color: black;
}

.check-ul{
	font-size: .28rem;
	
}
.check-ul li{
	margin-top: .1rem;
	margin-left: .2rem;
}
.check-list{
	border-top: .2rem solid #f2f2f2;
	border-bottom: .5rem solid #f2f2f2;
	position: relative;
}
.check-btn{
	margin-top: .1rem;
	height: 1.1rem;
}
.check-btn button{
	border: none;
	border-radius: .1rem;
	width: 2rem;
	height: .8rem;
	margin-bottom: .4rem;
	color: #ffffff;
}
.check-btn button:first-child{
	background: #90939a;
	margin-left: .3rem;
}
.check-btn button:last-child{
	background: #409efe;
	position: absolute;
	right: 0;
	margin-right: .3rem;
}

.check-list img{
	width: 2.5rem;
	height: 1.9rem;
	position: absolute;
	top: .2rem;
	right: 0;
}
</style>
